import { createRouter ,createWebHistory } from 'vue-router';//引入创建路由和创建历史模式的方法
import {usePermissionStore} from '@/stores/permission'
import useHttpStore from '@/stores/httpStore'
import { useRouter } from 'vue-router';
const router = createRouter({//创建路由以及配置路由
    history: createWebHistory(),//创建历史模式
    routes:[
        //配置最初始的路由信息
        {
            path:'/login',
            name:'login',
            component: ()=>import('@/views/page/login.vue'),
        },
        //不需要404页面了,将统一找不到的路由都跳转到登录页面
        // {  
        //     path: '/:pathMatch(.*)*',
        //     component: () =>
        //       import('@/views/error-page/404'),
        //   },
    ]
})


//路由前置守卫
router.beforeEach((to,from,next)=>{
     // 同名路由跳转不取消请求
  if (to.name === from.name) {
    // 用来路由变化时取消所有还在 pending 的请求
    // Vue.prototype.$cancelPendingHttp();
    console.log('路由相同,取消正在等待的请求,这部分属于网络部分,这里不实现')
  }
  const httpStore = useHttpStore()
  httpStore.pendingNum = 0; // 重置请求pending个数为0

  // 跳转之前将路由中查询字符串为空的过滤掉，如 xxx.com?page=&size= 这种
  let queryChange = false;
  // 设置默认query
  for (let i in to.meta.query) {
    if (to.query[i] === undefined) {
      if (to.meta.query[i] || (to.meta.query[i] === 0) || (to.meta.query[i] === false)) {
        to.query[i] = to.meta.query[i];
        queryChange = true;
      }
    }
  }
  // 删掉meta里面值为undefined或者''的属性(不然url不好看，像这样：xxx/xxx/xxx?isUpdate=&startTime=&endTime=)
  for (let i in to.query) {
    if (!to.query[i] && (to.query[i] !== 0) && (to.query[i] !== false)) {
      delete to.query[i];
      queryChange = true;
    }
  }

  // 获取当前路由的二级菜单，并将值存贮到store
//   let secondMenu = handleModule.getSecondMenu(store.state.permission.sidebarMenu, to);
//   store.commit('permission/setSecondMenu', secondMenu);


  // 根据有没有token判断是否登录
  if (!sessionStorage.token) {
    // 1、当用户打开localhost，to.matched === []，匹配的是空路由，此时需要重定向到login
    // 2、重定向到login之后，to.matched === [name: "login", path: "/login"...] 就是上一步的login页面
    // to.matched.some(item => item.meta.requiresAuth) 这句的意思是 进入的路由页需要登录认证，取反就是不用登录，直接通过
    //to.matched 则表示找到路由表中从父到子的路由配置,to.matched.length > 0表示能够在路由表中找到,不是404页面
    if (to.matched.length > 0 && !to.matched.some((item) => item.meta.requiresAuth)) {
      console.log('没有token,路由表中能找到该路由,并且不需要登录就能跳转,直接放行')
      next(); // 跳过，进入下一个导航钩子。比如：在 /login 路由页刷新页面会走到此逻辑
    } else {
        //一般来说要么就将所有找不到的页面都跳转到404页面,要么就跳转到登录页面,这里就跳转到登录页面吧
        if(to.matched.length === 0){
            console.log(to.path,"该页面找不到路由,当前vue-router路由表为,即将跳转到登录页面")
            const router = useRouter()
            console.log(router.options.routes)
        }
      next({ path: '/login' });
    }
  } 
  //有token的情况
  else{
    //查看状态里是否有permissionList(所有路由权限表)
    const permissionStore = usePermissionStore()
    if(!permissionStore.permissionList){
      //如果没有,则需要请求路由权限表
      console.log('没有permissionList,需要调用token换权限的方法')
      //返回的是一个promise
      permissionStore.FETCH_PERMISSION().then(()=>{
        console.log('换取权限之后的路由表信息',router.options.routes)
        next({ path: to.path, query: to.query }); //换取到权限之后继续访问当前的路由
      })
    }
    else{
      console.log('有permissionList(所有静态+动态的路由权限)',permissionStore.permissionList)
      //现在有permissionList了
      if(to.path !== '/login'){
        //有token并且有权限表,访问的不是登录页面
        if(to.matched.length === 0){//如果在路由表中没有找到该路由信息
          next({ path: '/403' }); //跳转到无权限页面
        }else{
          next()
        }
      }else{
        //访问的是登录页面
        sessionStorage.removeItem('token')
        sessionStorage.removeItem('userName')
        next()
      }
    }
  }
  
//   else {
//     // 防止第一次登录跳过修改密码直接改路由
//     if (Number(sessionStorage.firstLogin) === 1) {
//       store.commit('goToLogin');
//     } else if (!store.state.permission.permissionList) {
//       // 如果没有 permissionList，发请求获取用户权限列表
//       store.dispatch('permission/FETCH_PERMISSION').then(() => {
//         next({ path: to.path, query: to.query });
//       });
//     } else {
//       // 现在有 permissionList 了
//       if (to.path !== '/login') {
//         if (to.matched.length === 0) {
//           // 如果匹配到的路由形如 https://172.24.1.117/?id=xxx&name=xxx，表明是关联跳转时没有权限，跳转到403
//           next({ path: '/403' });
//         } else if (queryChange) {
//           // 跳转之前将路由中查询字符串为空的过滤掉，如 xxx.com?page=&size= 这种
//           next({ name: to.name, params: to.params, query: to.query });
//         } else {
//           next();
//         }
//       } else {
//         // 1.如果用户手动在地址栏输入 /login，清除token并刷新页面，就会去到登录页
//         store.commit('goToLogin');
//       }
//     }
//   }
})


//动态路由表,这里写死不需要权限/不需要再菜单栏展示的路由,在路由跳转的时会根据后端权限拼接有权限的路由到这里并动态加载到Router中
export const dynamicRoutes = [
    {
    path: '/',
    name: 'home',
    component: () =>
      import('@/views/MyHome.vue'),
    meta: {
      requiresAuth: true,
    },
    //这个无需后端返回权限控制也可以进行使用
    children: [
        {
            path: 'settings',
            name: 'Settings',
            meta: { title: '系统设置', icon: 'settings', roles: ['admin'] },
            component: () => import('@/views/page/setting.vue'),
          },
    ],
  },  
  {
    path: '/403',
    component: () =>
      import('@/views/error-page/403'),
  },
  // { 
  //   path: '/:pathMatch(.*)*',
  //   component: () =>
  //     import('@/views/error-page/404'),
  // },
  ];

//导出路由
export default router;